<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script></head><body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的 dom，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            text: '浏览器占比变化',
            subtext: '纯属虚构',
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,250,0.2)'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function() {
                var list = [];
                for (var i = 1; i <= 28; i++) {
                    list.push(i + 2000 + '');
                }
                return list;
            })()
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'yellow'],
            calculable: true
        },
        radar: {
            indicator: [{
                text: 'IE8-',
                max: 400
            },
                {
                    text: 'IE9+',
                    max: 400
                },
                {
                    text: 'Safari',
                    max: 400
                },
                {
                    text: 'Firefox',
                    max: 400
                },
                {
                    text: 'Chrome',
                    max: 400
                }]
        },
        series: (function() {
            var series = [];
            for (var i = 1; i <= 28; i++) {
                series.push({
                    name: '浏览器（数据纯属虚构）',
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                        width: 1
                    },
                    emphasis: {
                        areaStyle: {
                            color: 'rgba(0,250,0,0.3)'
                        }
                    },
                    data: [{
                        value: [(40 - i) * 10, (38 - i) * 4 + 60, i
                        * 5 + 10, i * 9, i * i / 2],
                        name: i + 2000 + ''
                    }]
                });
            }
            return series;
        })()
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script></body></html>